<template>
    <div>
        <el-drawer :model-value="visible" title="异常反馈" size="500px" @close="closeHandle" @closed="closed">
            <div class="demo-drawer__content">
                <el-form :model="form" ref="formRef" label-position="right">
                    <el-form-item label="人员" required prop="yewu_user" :label-width="formLabelWidth">
                        <el-select v-model="form.yewu_user" filterable default-first-option :reserve-keyword="false"
                            placeholder="请选择人员">
                            <el-option v-for="item in peopleList" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="异常选项" prop="yichangtype_id" :label-width="formLabelWidth">
                        <el-select v-model="form.yichangtype_id" filterable default-first-option :reserve-keyword="false"
                            placeholder="请选择异常">
                            <el-option v-for="item in userList" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="选择日期" prop="date" :label-width="formLabelWidth">
                        <el-date-picker v-model="form.date" type="date" placeholder="请选择日期" :size="size" />
                    </el-form-item>
                    <el-form-item label-position='left' label="内容" prop="content" :label-width="formLabelWidth">
                        <div style="border: 1px solid #ccc">
                            <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef"
                                :defaultConfig="toolbarConfig" :mode="mode" />
                            <Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml"
                                :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" />
                        </div>
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <el-space>
                    <el-button type="info" plain :loading="loading" @click="cancelHandle">取消</el-button>
                    <el-button type="primary" :loading="loading" @click="confirmHandle">提交保存</el-button>
                </el-space>
            </template>
        </el-drawer>
    </div>
</template>
<script setup>
import getConf from '@/views/news-upload/conf.js'
import { reactive, ref, computed, watch, shallowRef, onBeforeUnmount } from "vue"
import { getUsers } from "@/api/user.js";
import { feedbackEdit, feedbackAll } from "@/api/business.js"
import { toast } from "@/hook/toast";
import { delay } from "@/utils";
import store from '@/store'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
// import '@wangeditor/editor/dist/css/style.css' // 引入 css

const editorRef = shallowRef()
const valueHtml = ref('')
const FILE_LIST = ref([])
const toolbarConfig = {}
const getFilename = (src) => {
    const reg = /^[\s\S]+\/static\/([\s\S]+)$/
    const srcExec = reg.exec(src)
    if (srcExec) {
        return srcExec[1]
    }
}
const editorConfig = {
    placeholder: '请输入内容...',
    MENU_CONF: getConf(
        (src) => {
            const name = getFilename(src)
            if (name) {
                FILE_LIST.push(name)
            }
        },
    ),
}
const mode = 'default'
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})
const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}


const size = ref("default");
const formRef = ref(null)
const emits = defineEmits(['update:modelValue', 'addSuccess'])
const form = reactive({
    yewu_user: '',
    yichangtype_id: '',
    yichang_id: '',
    date: '',
    content: '',
})
const formLabelWidth = '80px'
const loading = ref(false);
const props = defineProps({
    modelValue: {
        type: Boolean,
        required: true,
    }
})
const visible = computed({
    get() {
        return props.modelValue
    },
    set(value) {
        console.log(value, '属性')
        emits('update:modelValue', value)
    }
})

const headerObj = ref({})
const { token } = store.getters
headerObj.value.token = token;
// 关闭组件
function closed() {
    resetForm()
}

// 添加图片
const fileList2 = ref([])

function handlePreview(w) {
    console.log(w, '23')
}
const array = ref([])
// 上传图片
function successUpdata(e) {
    array.value.push(e.data.fullurl)
    form.image = array.value
}

// 删除图片
function handleRemove(file) {
    form.image = ''
}

// 获取人员列表
const peopleList = ref([])
async function getPeopleList() {
    const resp = await getUsers()
    const { code, data, msg } = resp
    if (code !== 1) return
    if (!!data && data.length) {
        peopleList.value = data.map(item => {
            const { id, nickname } = item
            return { value: id, label: nickname }
        })
    }
}


// 获取异常反馈
const userList = ref([])
async function initUserList() {
    const resp = await feedbackAll()
    const { code, data, msg } = resp
    if (code !== 1) return
    if (!!data && data.length) {
        userList.value = data.map(item => {
            const { id, name } = item
            return { value: id, label: name }
        })
    }
}

watch(() => props.modelValue, value => {
    if (!value) {
        return
    }
    getPeopleList()
    initUserList()
})


const closeHandle = () => {
    visible.value = false
};
const cancelHandle = () => {
    visible.value = false
}
function editHandle(row) {
    console.log(row, '信息')
    visible.value = true
    const { id, yewu_user, yewu_yichang_type, date, content } = row
    form.yewu_user = yewu_user
    form.yichangtype_id = yewu_yichang_type
    form.date = date
    form.yichang_id = id
    if (content) {
        valueHtml.value = decodeURIComponent(content) || '';
    }

}
// 编辑
defineExpose({
    editHandle,
})
// 提交保存
function confirmHandle() {
    formRef.value.validate(async flag => {
        if (!flag) return
        loading.value = true
        const { yewu_user, yichangtype_id, yichang_id, date } = form
        const htmlVl = encodeURIComponent(valueHtml.value)
        const payload = {
            yewu_user, yichangtype_id, yichang_id, date, content: htmlVl
        }
        console.log(payload, '传输数据')
        const resp = await feedbackEdit(payload)
        const { code, msg } = resp
        await delay(200)
        toast({ title: msg })
        loading.value = false
        if (code !== 1) return
        triggerUpdate()
    })
}

// 清空数组 并关闭
function resetForm() {
    form.yewu_user = ''
    form.yichangtype_id = ''
    form.yichang_id = ''
    form.date = ''
    editorRef.value.clear()
    formRef.value.resetFields()
}

function triggerUpdate() {
    emits('addSuccess')
    resetForm()
    visible.value = false
}

</script>
<style></style>
